<template>
	<view class="root">

		<view class="body">

			<view class="">
				<uni-forms :value="formData" ref="form" :rules="rules">
					<uni-group>
						<view style="margin-bottom: 15px;" class="">
							<text>1、学院信息</text>
						</view>

						<uni-forms-item required label="学号" name="stu_id">
							<uni-easyinput type="text" v-model="formData.stu_id" placeholder="请输入学号"></uni-easyinput>
						</uni-forms-item>

						<uni-forms-item required label="学院" name="xueyuan" :errorMessage="xueyuan_error">
							<picker mode="selector" :range="xueyuan_list" @change="xueyuaan_change($event.detail)">
								<view class="sel">
									<text>{{xueyuan_text}}</text>
									<image src="../../static/img/arrow-down-bold.png" mode=""></image>
								</view>
							</picker>
						</uni-forms-item>

						<uni-forms-item required label="专业" name="major">
							<picker mode="selector" :range="major_list" @change="major_change($event.detail)">
								<view class="sel">
									<text>{{major_text}}</text>
									<image src="../../static/img/arrow-down-bold.png" mode=""></image>
								</view>
							</picker>
						</uni-forms-item>

						<uni-forms-item required label="班级(全称)" name="cla">
							<uni-easyinput type="text" v-model="formData.cla" placeholder="请输入班级(全称)"></uni-easyinput>
						</uni-forms-item>

					</uni-group>

					<uni-group>

						<view style="margin-bottom: 15px;" class="">
							<text>2、基本信息</text>
						</view>

						<!-- 列表渲染 -->
						<uni-forms-item required label="姓名" name="name">
							<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" confirmType="完成" />
						</uni-forms-item>

						<uni-forms-item required label="身份证号" name="id">
							<uni-easyinput type="text" v-model="formData.id" placeholder="请输入身份证号" confirmType="完成" />
						</uni-forms-item>



						<uni-forms-item required label="民族" name="nation">

							<picker mode="selector" :range="national" @change="nat_change($event.detail)">
								<view class="sel">
									<text>{{nat_text}}</text>
									<image src="../../static/img/arrow-down-bold.png" mode=""></image>
								</view>
							</picker>

						</uni-forms-item>



						<uni-forms-item required name="gender" label="性别">
							<uni-data-checkbox v-model="formData.gender" :localdata="gender" />
						</uni-forms-item>

						<uni-forms-item label="户口" required name="reg">
							<uni-data-checkbox v-model="formData.reg" :localdata="reg_list" />

						</uni-forms-item>

						<uni-forms-item label="联系电话" required name="tel">
							<uni-easyinput placeholder="请输入11位电话号码" v-model="formData.tel"></uni-easyinput>
						</uni-forms-item>

					</uni-group>



					<!-- <uni-group>
						<view style="margin-bottom: 15px;">
							<text>2、班级详情</text>
						</view>

						<uni-forms-item required label="学号"  name="stu_id">
							<uni-easyinput type="number" v-model="formData.stu_id" placeholder="请输入学号" />
						</uni-forms-item>

						<uni-forms-item required label="班级" name="classname">
							<uni-easyinput type="text" v-model="formData.classname" placeholder="请输入班级(全称)" />
						</uni-forms-item>

					</uni-group>
 -->



					<uni-group>
						<button type="primary" @click="submitForm">下一页(1/5)</button>
					</uni-group>



					<!-- <uni-forms-item label="年龄" name="age">
						<input type="text" v-model="formData.age" placeholder="请输入年龄" @input="binddata('age',$event.detail.value)" />
					</uni-forms-item>
					 -->

				</uni-forms>
			</view>
		</view>
	</view>
</template>

<script>
	var national = require("../../static/national.js");
	var major = require("../../static/major.js");
	major = major.major;
	// 获取民族数组
	national = national.national;

	export default {
		data() {
			return {
				title: "基本信息",
				input_text: '姓名',
				nat_text: '请选择',
				xueyuan_text: '请选择',
				xueyuan_list: ['智能制造学院', '信息工程学院'],
				major_text: '请选择',

				major_list: ['请选择学院'],
				reg_list: [{
						text: '农村',
						value: '农村'
					},
					{
						text: '城镇',
						value: '城镇'
					}
				],
				xueyuan_error: '',
				formData: {
					name: '',
					id: '',
					dormitory: '',
					age: '',
					stu_id: '',
					classname: '',
					nation: '',
					xueyuan: '',
					major: '',
					cla: '',
					tel: '',
					reg: ''
				},
				lists: [{
						item: 1,
						lable: '姓名',
						name: 'name',
						placeholder: '请输入姓名'
					},
					{
						item: 2,
						lable: '身份证号',
						name: 'id',
						placeholder: '请输入身份证号'
					},

				],
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]

					},
					id: {
						rules: [{
								required: true,
								errorMessage: '请输入身份证号'
							},
							{
								minLength: 18,
								maxLength: 18,
								errorMessage: '身份证号长度为{maxLength} 个字符',
							}
						]
					},
					stu_id: {
						rules: [{
								required: true,
								errorMessage: '请输入学号'
							},
							{

								minLength: 10,
								maxLength: 11,
								errorMessage: '学号长度在{minLength}或{maxLength}个字符'
							}
						]
					},
					dormitory: {
						rules: [{
							required: true,
							errorMessage: '请输入宿舍号'
						}]
					},
					classname: {
						rules: [{
							required: true,
							errorMessage: '请输入班级',

						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择性别'
						}]
					},
					nation: {
						rules: [{
							required: true,
							errorMessage: '请选择民族'
						}]
					},
					major: {
						rules: [{
							required: true,
							errorMessage: '请选择专业'
						}]
					},
					xueyuan: {
						rules: [{
							required: true,
							errorMessage: '请选择学院'
						}]
					},
					reg: {
						rules: [{
							required: true,
							errorMessage: '请选择户口性质'
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话'
						}, {
							minLength: 11,
							maxLength: 11,
							errorMessage: '号码输入长度错误'
						}]
					},
					cla:{
						rules:[{
							required: true,
							errorMessage: '请输入班级(全称)'
						}]
					}
				},
				gender: [{
						text: '男',
						value: '男'
					},
					{
						text: '女',
						value: '女'
					}
				],
				nat: ["1", "1"],
				national: national

			}
		},
		methods: {
			submitForm(form) {
				
				// 提交表单
				this.$refs.form.validate().then(res => {
					console.log('test')
					console.log('表单数据信息：', res);
					getApp().globalData.kunnan.kunnan = res
					uni.setStorage({
						key: 'kunnan_info',
						data: getApp().globalData.kunnan
					})
					uni.navigateTo({
						url: './jbqk'
					});

				}).catch(err => {
					// this.$data.errorMessage = res[0].errorMessage
					if (this.$data.formData.xueyuan == '') {
						this.$data.xueyuan_error = '请选择学院';
					}
					// console.log(err)
				})
			},

			// 当民族发生变化
			nat_change(even) {
				this.$data.nat_text = national[Number(even.value)];
				this.$data.formData.nation = national[Number(even.value)];

			},

			// 当学院发生变化
			xueyuaan_change(even) {
				this.$data.xueyuan_error = ' ';
				var xueyuan1 = this.$data.xueyuan_list[Number(even.value)];
				this.$data.xueyuan_text = xueyuan1;
				this.$data.formData.xueyuan = xueyuan1;
				// 清空数组
				this.$data.major_list.splice(0);
				this.$data.major_text = '请选择';
				for (var i = 0; i < major.length; i++) {
					if (major[i].xueyuan == xueyuan1) {
						// console.log('');
						for (var j = 0; j < major[i].list.length; j++) {
							this.$data.major_list.push(major[i].list[j].major);
						}
						break;
					}

				}

			},

			// 当专业发生变化
			major_change(even) {
				this.$data.major_text = this.$data.major_list[Number(even.value)];
				this.$data.formData.major = this.$data.major_list[Number(even.value)];
			},

			reg_chage(e) {
				this.formData.reg = this.reg_list[e.detail.value]
				this.reg_text = this.reg_list[e.detail.value]
			}
		},
		// 载入
		onLoad: function() {
			
			
			uni.showLoading({
				title: '加载中'
			})
			
			
			// 获取本地数据缓存
			uni.getStorage({
				key: 'kunnan_info',
				success: (res) => {
					getApp().globalData.kunnan = res.data
					if(res.data.kunnan != undefined){
						let kunnan = res.data.kunnan
						this.formData = kunnan
						this.xueyuan_text = kunnan.xueyuan
						this.major_text = kunnan.major
						this.nat_text = kunnan.nation
					}
					
					
					setTimeout(function() {
						uni.hideLoading();
					}, 300);
				},
				// 本地数据不存在
				fail: () => {
					// 检测是否已提交
					uni.getStorage({
						key:'stu_id',
						success: (res)=>{
							const db = uniCloud.database()
							db.collection('shaoguan_kunnan')
							.where({
								stu_id:res.data
							})
							.get()
							.then(res =>{
								// console.log(res)
								
								if(res.result.data.length == 1){
									delete res.result.data[0]._id
									uni.showModal({
										title:'提示',
										content:'检测到您已提交，是否自动填充数据？',
										success: (modal_res) => {
											
											if(modal_res.confirm){
												uni.showLoading({
													title:'加载中'
												})
												uni.setStorage({
													key:'kunnan_info',
													data:res.result.data[0].content
												})
												
												getApp().globalData.kunnan = res.result.data[0].content
												if(res.result.data[0].content.kunnan != undefined){
													let kunnan = res.result.data[0].content.kunnan
													this.formData = kunnan
													this.xueyuan_text = kunnan.xueyuan
													this.major_text = kunnan.major
													this.nat_text = kunnan.nation
												}
												
												
												setTimeout(function() {
													uni.hideLoading();
												}, 300);
					
											}
										}
									})
								}else{
									uni.showModal({
										title:'提示',
										content:'在填写前,您需要准备:\n1.本人身份证号码 \n2.家庭成员信息:电话号码、就业情况等\n3.相关佐证材料电子版，打包为一个压缩包'
									})
								}
							}).catch(err =>{
								uni.showModal({
									title:'提示',
									content:'错误'+err
								})
							})
							
						}
					})
					setTimeout(function() {
						uni.hideLoading();
					}, 300);
				}
			})
		},
		onShow: function() {
			
		}
	}
</script>

<style>
	.sel {
		height: 36px;
		border: .6px solid #eee;
		border-radius: 4px;
		line-height: 36px;
		/* box-sizing: border-box; */
		padding-left: 10px;
		padding-right: 10px;
		color: rgb(128, 128, 128);
	}

	.sel image {
		float: right;
		width: 20px;
		height: 20px;
		margin-top: 8px;

	}

	.root {}

	* {
		margin: 0;
		padding: 0;
	}

	.header_top {
		height: 45px;
		text-align: center;
		line-height: 45px;
		font-size: 18px;
		font-weight: 700;
		color: #fff;
		background-color: #3669f8;
		/* position: fixed; */
	}
</style>
